.cq-switch--s1n1 {
	display: inline-block;

	.cq-switch--input {
		display: none;
	}

	.cq-switch--core {
		position: relative;
		width: 40px;
		height: 0;
		padding-bottom: 22px;
		font-weight: 200;
		border: 2px solid #dcdcdc;
		border-radius: 34px;
		background-color: #fff;
		-webkit-transition: 0.25s;
		transition: background-color 0.25s, border-color 0.25s;
		cursor: pointer;

		&::before {
			display: block;
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			z-index: 2;
			width: 20px;
			padding-bottom: 20px;
			border-radius: 11px;
			transform: translate(0, -50%);
			background-color: #fff;
			box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25);
			transition: all 0.25s;
		}

		&::after {
			display: block;
			content: '';
			position: absolute;
			top: 50%;
			left: 0px;
			z-index: 1;
			width: 100%;
			height: 100%;
			border-radius: 34px;
			background-color: #fff;
			transform-origin: 60% center;
			transform: translateY(-50%) scale(1);
			transition: transform 0.4s ease;
		}
	}

	.cq-switch--input:checked + .cq-switch--core {
		display: block;
		border-color: var(--theme-color);
		background-color: var(--theme-color);

		&::before {
			left: 100%;
			transform: translate(calc(-100% - 0px), -50%);
		}

		&::after {
			transform: translateY(-50%) scale(0);
		}
	}

	&:active {
		.cq-switch--core {
			background-color: #dcdcdc;

			&::before {
				width: 24px;
			}

			&::after {
				transform: translateY(-50%) scaleX(0.4) scaleY(0);
			}
		}
	}
}
